<template>
  <div class="postEditPage">
    <div class="header">
      <van-icon class="header-item" name="arrow-left" size="large" @click="toBack"/>
      <span class="header-item">文章</span>
      <van-icon class="header-item" name="passed" size="large" @click="onSubmit"></van-icon>
    </div>
    <div class="write-area">
      <input class="content small-box" placeholder="给你的帖子起个好听的标题" v-model="postTitle" maxlength="50"/>
      <van-divider :style="{ borderColor: '#27282a', padding: '0 16px'}"/>
    </div>
    <div class="write-area">
      <textarea class="content area-height" type="text" placeholder="写下内容..." v-model="postContent"/>
    </div>
    <div style="height: 32vh;margin: 0 4vw;">
      <van-uploader v-model="imageList" readonly deletable>
        <template #default>
        </template>
      </van-uploader>
    </div>
    <div class="type">
      <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="top-start">
        <template #reference>
          <span class="type-choose">添加分区</span>
        </template>
      </van-popover>
    </div>
    <div class="footer">
      <van-uploader :after-read="afterRead"	class="footer-item">
        <template #default>
          <van-icon name="photo-o"/>
        </template>
      </van-uploader>
      <van-icon name="smile-o" class="footer-item"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, toRaw} from "vue";
import {useRouter} from "vue-router";
import {Notify, PopoverAction, Toast} from "vant";
import myAxios, {INDEX_URL} from "../../plugins/myAxios";

const router = useRouter();
const postTitle = ref('')
const postContent = ref('')

const imageList = ref([])

const type = ref('')

const showPopover = ref(false);
const actions = [
  { text: '学习', icon: 'apps-o' },
  { text: '游戏', icon: 'live' },
  { text: '生活', icon: 'bag-o' },
  { text: '娱乐', icon: 'music-o' },
];

let config = {
  headers: {
    "Content-Type": "multipart/form-data"
  }
};
let formData = new FormData();
formData.append('biz', "post_photo");
const afterRead = async (file) => {
  formData.append('file', file.file);
  const reader = new FileReader();
  reader.readAsDataURL(file.file);
  reader.onload = () => {
    file.content = reader.result;
    imageList.value.push(file);
  };
}
const onSelect = (action: PopoverAction) => {
  type.value = action.text
  Notify({type: "success", message: '分区已选择为 -- ' + action.text,position: 'bottom',})
}
const toBack = () => {
  router.back();
}
const getUrls = () => {
  let array = toRaw(imageList.value);
  return array.map(item => item.url);
}
const onSubmit = () => {
  if (type.value === ''){
    Toast.fail('请添加分区!')
  }else {
    if (formData.has('file')) {
      myAxios.post('/file/upload', formData, config)
          .then((res) => {
            if (res.code === 0) {
              formData.delete('file')
              imageList.value = [];
              res.data.map(item => {
                let list = {
                  url: item,
                  deletable: true
                }
                imageList.value.push(list)
              })
              myAxios.post(`/post/add`, {
                title: postTitle.value,
                content: postContent.value,
                type: type.value,
                photos: JSON.stringify(getUrls()),
              })
                  .then((otherRes) => {
                    if (otherRes.code === 0) {
                      console.log('发布成功')
                      Notify({type: 'success', message: '已成功发布'});
                      router.back();
                    } else {
                      Toast.fail(otherRes.message);
                    }
                  })
            }
          })
    }else {
      myAxios.post(`/post/add`, {
        title: postTitle.value,
        content: postContent.value,
        type: type.value,
        photos: JSON.stringify(getUrls()),
      })
          .then((otherRes) => {
            if (otherRes.code === 0) {
              console.log('发布成功')
              Notify({type: 'success', message: '已成功发布'});
              router.back();
            } else {
              Toast.fail(otherRes.message);
            }
          })
    }
  }
}
</script>

<style scoped>
.postEditPage:before{
  height: 100vh;
  width: 100vw;
}
.header{
  display: flex;
  justify-content: space-between;
  height: 6vh;
  border-bottom: 1px solid #e8e8e8;
}
.header-item{
  width: 15vw;
  text-align: center;
  font-weight: bold;
  border: 0;
  line-height: 6vh;
}
.content{
  border: 0;
  width: 90vw;
  height: 5vh;
  padding-left: 4vw;
  background: transparent;
}
.area-height{
  height: 34vh;
}
::placeholder{
  font-weight: 800;
}
.footer{
  border-top: 1px solid #e8e8e8;
  margin-top: 2vh;
  width: 100vw;
  height: 5vh;
  line-height: 5vh;
  font-size: 4vh;
  margin-right: 5vw;
}
.footer-item{
  margin-right: 4vw;
}
.footer-item:first-child{
  margin-left: 40vw;
}
.type{
  height: 4vh;
  border-radius: 10px;
  background-color: #e0e0e0;
  width: 20vw;
  text-align: center;
  margin-left: 2vw;
  margin-top: 2vh;
}
.type-choose{
  text-align: center;
  font-size: 10px;
  font-weight: 400;
}
</style>